<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			font-size: 50px;
		}

		#box {
			width: 100%;
			height: 1000px;
			background-color: white;
		}

		ul {
			list-style: none;
		}

		#head {
			width: 100%;
			height: 130px;
			text-align: center;
			background-color: #007bff;
		}

		.title {
			font-size: 58px;
			color: white;
			line-height: 120px;
			;
		}

		#head a {
			font-size: 50px;
			color: white;
			position: absolute;
			line-height: 120px;
			left: 60px;
			text-decoration: none;
		}

		#xinxi1 li {
			height: 110px;
			line-height: 110px;
			padding-left: 30px;
			border-bottom: 1px solid #d3d3d3;
		}

		.right {
			float: right;
			color: #808080;
			padding-right: 50px;
		}

		.right1 {
			position: absolute;
			color: #808080;
			right: 50px;
		}

		#guodu {
			width: 100%;
			height: 50px;
			background-color: #e9e9e9;
		}

		#guodu2 {
			width: 100%;
			height: 80px;
			background-color: #e9e9e9;
		}

		#touxiang li {
			height: 180px;
			line-height: 180px;
			padding-left: 30px;
			border-bottom: 1px solid #d3d3d3;
		}

		img {
			padding-top: 10px;
		}
		#xiugai{
	
			margin-left: 250px;
			text-decoration:none;
		}
	</style>
	<script type="text/javascript">
		//页面获取数据
		$(function () {
			refurbishIndex();

		});
		function refurbishIndex() {
			$.ajax({
				type: "get",
				url: "/perlist",
				data: {
				},
				async: false,
				success: function (data) {
					for (i in data) {
					document.getElementById("name").innerHTML = data[i].name;
					document.getElementById("usercode").innerHTML = data[i].usercode;
					document.getElementById("sex").innerHTML = data[i].sex;
					document.getElementById("age").innerHTML = data[i].age;
					document.getElementById("type").innerHTML = data[i].type;
					document.getElementById("grade").innerHTML = data[i].grade;
					document.getElementById("phoneNumber").innerHTML = data[i].phoneNumber;
					document.getElementById("id").innerHTML = data[i].id;
					}
				},
				error: function (data) {
					alert("请先登陆");
				}
			});
		}
	</script>
</head>

<body>
	<div id="box">
		<div id="head">
			<a href="PersonalCenter">返回</a>
			<span class="title">我的资料</span>
		</div>
		<div id="touxiang">
			<ul>
				<li>头像<span class="right">
						<img src="/Aa.jpg" width="150" height="150"></span></li>
			</ul>
		</div>
		<div id="xinxi1">
			<ul>
				<li>账号<span class="right1" id="usercode"></span></li>
				<li>姓名<span class="right"  id="name"></span></li>
				<li>性别<span class="right"  id="sex"></span></li>
				<li>年龄<span class="right"  id="age"></span></li>
			</ul>
			<div id="guodu"></div>
			<div id="xinxi2">
				<ul>
					<li>类型<span class="right" id="type"></span></li>
					<li>班级<span class="right" id="grade"></span></li>
				</ul>
			</div>
			<div id="guodu"></div>
			<div id="xinxi3">
				<ul>
					<li>手机号<span class="right" id="phoneNumber"></span></li>
					<li>座机<span class="right" >无</span></li>
					<li>邮箱<span class="right">无</span></li>
				</ul>
			</div>
			<div id="guodu2"></div>
			<div id="xinxi4">
				<ul>
					<li>Number<span class="right" id="id"></span></li>
				</ul>
			</div>
			<a href="xiugai" id="xiugai">修改个人信息</a>
		</div>
</div>
</body>

</html>